<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="yes" name="apple-touch-fullscreen" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <link rel="stylesheet" href="./assets/css/priview/index.css">
    <title>lib.flexible</title>
</head>
	<body>
		<div class="wrap">
			<header>
				<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/blackback.png" class="wrapheader" alt="">
				<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/whiteback.png" class="wrapheader_1" alt="">
				<p class="time">12:00</p>
				<p class="wraptitle" id="title">微刊2.0</p>
			</header>
			<nav class="navlist">
				<li class="active">职业发展</li>
				<li>专注领域</li>
				<li>新闻中心</li>
				<div class="navsearch">
					<div class="searchicon">
						<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/searchicon.png" style="-webkit-filter: drop-shadow(36px 0 0 red);filter: drop-shadow(36px 0 0 red);" alt="">
					</div>
				</div>
			</nav>
			<section class="wrapcontain containBox" style="background-color: #fff;">

			</section>
			<section class="bigimg containBox">
				<article>
					<p class="text">职业发展是组织用来帮助员工获取目前及将来工作所需的技能</p>
					<span class="textbanner">
					<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/list_photo_01_big.png" alt="">
				</span>
					<div class="music">
						<p class="musicText">2018-12-05</p>
						<div class="share">
							<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/shareIcon.png" alt="">
							分享
						</div>
						<div class="click">
							<span class="back center"></span>
							<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/pause.png" class="center" alt="">
						</div>
					</div>
				</article>
				<article>
					<p class="text">职业发展是组织用来帮助员工获取目前及将来工作所需的技能</p>
					<span class="textbanner">
					<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/list_photo_02_big.png" alt="">
				</span>
					<div class="music">
						<p class="musicText">2018-12-05</p>
						<div class="share">
							<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/shareIcon.png" alt="">
							分享
						</div>
						<div class="click">
							<span class="back center"></span>
							<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/pause.png" class="center" alt="">
						</div>
					</div>
				</article>
				<article>
					<p class="text">职业发展是组织用来帮助员工获取目前及将来工作所需的技能</p>
					<span class="textbanner">
					<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/list_photo_03_big.png" alt="">
				</span>
					<div class="music">
						<p class="musicText">2018-12-05</p>
						<div class="share">
							<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/shareIcon.png" alt="">
							分享
						</div>
						<div class="click">
							<span class="back center"></span>
							<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/pause.png" class="center" alt="">
						</div>
					</div>
				</article>
			</section>
		</div>
		<script src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/assets/js/jquery-3.3.1.min.js"></script>
		<script>
			var url = 'https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/';
			var data = [
				{
				    text:'职业发展是组织用来帮助员工获取目前及将来工作所需的技能',
					img:'list_photo_01'
				},
                {
                    text:'组织有效开发人力资源',
                    img:'list_photo_02'
                },
                {
                    text:'取得成功和成就的终身的职业活动是组织有效开发人力资源',
                    img:'list_photo_03'
                },
                {
                    text:'职业发展是组织用来帮助员工获取目前及将来工作所需的技能',
                    img:'list_photo_01'
                },
                {
                    text:'职业发展是组织用来帮助员工获取目前及将来工作所需的技能',
                    img:'list_photo_02'
                },
                {
                    text:'组织有效开发人力资源',
                    img:'list_photo_03'
                },
                {
                    text:'取得成功和成就的终身的职业活动是组织有效开发人力资源',
                    img:'list_photo_03'
                },
                {
                    text:'职业发展是组织用来帮助员工获取目前及将来工作所需的技能',
                    img:'list_photo_04'
                }

			];
			var html = '';
            for (let i = 0; i < data.length; i++) {
                html += '<article>\n' +
                    '\t\t\t\t\t<div class="conleft">\n' +
                    '\t\t\t\t\t\t<p class="text">'+data[i].text+'</p>\n' +
                    '\t\t\t\t\t\t<div class="music">\n' +
                    '\t\t\t\t\t\t\t<div class="click">\n' +
                    '\t\t\t\t\t\t\t\t<span class="back center"></span>\n' +
                    '\t\t\t\t\t\t\t\t<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/pause.png" class="center" alt="">\n' +
                    '\t\t\t\t\t\t\t</div>\n' +
                    '\t\t\t\t\t\t\t<div class="share">\n' +
                    '\t\t\t\t\t\t\t\t<img src="https://middle-platform-api.oss-cn-beijing.aliyuncs.com/microbook/priview/img/shareIcon.png" alt="">\n' +
                    '\t\t\t\t\t\t\t\t分享\n' +
                    '\t\t\t\t\t\t\t</div>\n' +
                    '\t\t\t\t\t\t</div>\n' +
                    '\t\t\t\t\t</div>\n' +
                    '\t\t\t\t\t<div class="conright">\n' +
                    '\t\t\t\t\t\t<img src="'+url+data[i].img+'.png" alt="">\n' +
                    '\t\t\t\t\t</div>\n' +
                    '\t\t\t\t</article>';
            }
            $('.wrapcontain').append(html);
            $('.time').text(new Date().getHours() + ':' + new Date().getMinutes());
			setInterval(function(){
                $('.time').text(new Date().getHours() + ':' + new Date().getMinutes());
			},1000)
			var windowWidth = 300;
			$('body').css({'-webkit-transform':'scale('+windowWidth/750+')','transform': 'scale(' + windowWidth / 750 + ')' })
		</script>
	</body>
</html>